<template>
    <div class="common-form">
        <a-form
            :model="model"
            :layout="layout"
            :name="name"
            autocomplete="off"
            @finish="handleQuery"
        >
            <slot/>
            <a-form-item>
                <a-button type="primary" html-type="submit" v-auth="'sysRole:page'">搜素</a-button>
                <a-button @click="handleReset" v-auth="'sysRole:page'">重置</a-button>
                <a-button class="ml-1" @click="handleAdd" :icon="h(PlusOutlined)" v-auth="'sysRole:add'">
                    新增
                </a-button>
            </a-form-item>
        </a-form>
    </div>
</template>

<script setup lang="ts">
import {withDefaults,h, computed} from 'vue'
import {PlusOutlined} from '@ant-design/icons-vue'
import { useUserInfo } from '@/stores/userInfo';
import { storeToRefs } from 'pinia';

const props = withDefaults(defineProps<{
    layout?: 'inline' | 'vertical' | 'horizontal',
    model:any,
    name:string,
    btnShow?:{
        add: boolean
    }
}>(),{
    layout: 'inline',
    btnShow:()=>({add:true})
})

const emits = defineEmits<{
    (e:'query',):void,
    (e:'add'):void,
    (e:'reset'):void,
}>()

const userInfoStore = useUserInfo()
const {state:userInfoState} = storeToRefs(userInfoStore)


const handleQuery = () => {
    emits('query')
}

const handleReset = ()=>{
    emits('reset')
}

const handleAdd = ()=>{
    emits('add')
}
</script>

<style lang="scss" scoped>
:deep(.ant-btn >span) {
    display:inline-flex!important;
}
:deep(.ant-form-item){
    margin-bottom: 10px;
}
</style>